<template>
	<div class="benefits">
		<div id="vip-generous" class="box-generous" @click="goDetails('rewards-vip-xp')">
			<p class="title app-font-heavy" v-html="$t('rewards.vipBenefits.title')" />
			<div class="light-box">
				<div class="light-image-wrap">
					<img
						src="@/assets/img/activity/vip-benefits/light-brown.svg"
						alt=""
						class="light-image" />
				</div>
				<img src="@/assets/img/activity/vip-benefits/generous.png" alt="" class="vip-image" />
			</div>
			<div class="vip-content">
				<base-button type="primary" round @click.stop="$router.push('/')">
					{{ $t('rewards.vipBenefits.betNow') }}
				</base-button>
			</div>
		</div>
		<div
			id="vip-ftd"
			v-if="'5' in activityStore.activitiesObj || '2' in activityStore.activitiesObj"
			class="box-item bg-green"
			@click="goDetails('rewards-bonus-ftd-predeposit')">
			<div class="item-content">
				<img src="@/assets/img/activity/vip-benefits/first-deposit.png" alt="" />
				<p class="text-yellow app-font-heavy">
					{{ $t('rewards.vipBenefits.firstTimeDepositBonus') }}
				</p>
				<p class="item-note">
					<!--这里与首页卡片逻辑不同,这里优先显示新首充,后台没配置则不显示-->
					{{
						'5' in activityStore.activitiesObj
							? t('rewards.vipBenefits.firstTimeDepositBonusContent', {
									amount: fmtAmount(activityStore.activitiesObj[5]?.maxBonus, {
										useName: true
									}),
									percentage: percentage(activityStore.activitiesObj[5]?.maxBonusPercentage)
								})
							: t('rewards.vipBenefits.firstTimeDepositBonusContentOld', {
									amount: fmtAmount(activityStore.activitiesObj[2]?.maxBonus, {
										useName: true
									}),
									percentage: percentage(activityStore.activitiesObj[2]?.maxBonusPercentage, true),
									// 存款流水始终为 1 倍。 奖金流水才是10倍8倍这样的
									toMultiplier: 1
								})
					}}
				</p>
			</div>
		</div>
		<div id="vip-reload" class="box-item bg-purple">
			<ComingSoon />
			<div class="item-content">
				<img src="@/assets/img/activity/vip-benefits/reload-bonus.png" alt="" />
				<p class="text-yellow app-font-heavy">
					{{ $t('rewards.vipBenefits.reloadBonus') }}
				</p>
				<p class="item-note">
					{{
						// appStore.switch.reloadBonus
						// 	? $t('rewards.vipBenefits.reloadBonusContent', {
						// 			percentage: percentage(activityStore.status.reloadDeposit.maxRatio)
						// 		})
						// 	:
						$t('rewards.vipBenefits.reloadBonusContentComing')
					}}
				</p>
			</div>
		</div>
		<div id="vip-level-up" class="box-item bg-brown" @click="goDetails('rewards-bonus-levelup')">
			<div class="item-content">
				<img src="@/assets/img/activity/vip-benefits/level-up-bonus.png" alt="" />
				<p class="text-yellow app-font-heavy">
					{{ $t('rewards.vipBenefits.levelUpBonus') }}
				</p>
				<p class="item-note">
					{{ $t('rewards.vipBenefits.levelUpBonusContent') }}
				</p>
			</div>
		</div>
		<div id="vip-weekly-bonus" class="box-item bg-blue">
			<ComingSoon />
			<div class="item-content">
				<img src="@/assets/img/activity/vip-benefits/weekly-bonus.png" alt="" />
				<p class="text-yellow app-font-heavy">
					{{ $t('rewards.vipBenefits.weeklyBonus') }}
				</p>
				<p class="item-note">
					{{ $t('rewards.vipBenefits.weeklyBonusContent') }}
				</p>
			</div>
		</div>
		<div id="vip-weekly-cashback" class="box-item bg-olive" @click="goDetails('rewards-cashback')">
			<div class="item-content">
				<img src="@/assets/img/activity/vip-benefits/weekly-cashback.png" alt="" />
				<p class="text-yellow app-font-heavy">
					{{ $t('rewards.vipBenefits.weeklyCashback') }}
				</p>
				<p class="item-note">
					{{ $t('rewards.vipBenefits.weeklyCashbackContent') }}
				</p>
			</div>
		</div>
		<div id="vip-rebate" class="box-item bg-dark-blue">
			<div class="item-content">
				<img src="@/assets/img/activity/vip-benefits/rebates.png" alt="" />
				<p class="text-yellow app-font-heavy">
					{{ $t('rewards.vipBenefits.rebates') }}
				</p>
				<p class="item-note">
					{{ $t('rewards.vipBenefits.rebatesContent') }}
				</p>
			</div>
		</div>
		<table-benefit class="!grid-cols-1" />
	</div>
</template>

<script setup lang="ts">
import TableBenefit from '@/views/activity/components/table-benefits/index.vue'

import { useActivityStore } from '@/store'
import { fmtAmount, goDetails, percentage, t } from '@/utils'
import ComingSoon from '../../../components/coming-soon/index.vue'

const activityStore = useActivityStore()
</script>
<style lang="scss" scoped>
.benefits {
	padding: 10px 17px 69px;
	.icon-size {
		display: block;
		width: 40px;
		height: 40px;
	}
	.icon-small-size {
		width: 16px;
		height: 16px;
	}
	.wrap-bb-icon {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: 4px;
	}
	:deep(.text-yellow) {
		color: var(--color-text-f);
	}
	.box-generous {
		background: linear-gradient(180deg, #812708 0%, #4a2129 30.41%, #432c35 69.75%, #6d4c2e 100%);
		height: 284px;
		width: 280px;
		border-radius: 10px;
		margin: 0 auto;
		padding: 24px 18px;
		text-align: center;
		.title {
			min-height: 51px;
			color: var(--color-white);
			font-size: 14px;
			line-height: 16.8px;
		}
		.light-box {
			position: relative;
			width: 100%;
			margin-top: 10px;
			.vip-image {
				position: relative;
				display: block;
				width: 250px;
				margin: auto;
			}
			.light-image-wrap {
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				inset: 0;
			}
			.light-image {
				width: 280px;
				pointer-events: none;
				//animation: auto-rotate 5s linear infinite;
			}
			.vip-image {
				position: relative;
				display: block;
				width: 250px;
				margin: auto;
			}
		}
		.vip-content {
			width: max-content;
			min-width: 99px;
			margin: 8px auto 0;
			:deep(.van-button) {
				height: 28px;
			}
		}
	}
	.box-item {
		width: 280px;
		min-height: 200px;
		border-radius: 10px;
		margin: 10px auto;
		position: relative;
		.item-content {
			text-align: center;
			font-size: 12px;
			line-height: 16px;
			padding: 16px;
			color: var(--color-white);
			img {
				width: 250px;
			}
			.text-yellow {
				padding: 3px 0 2px;
				font-size: 14px;
			}
			.link {
				color: var(--color-text-f);
				text-decoration: underline;
				text-underline-offset: 2px;
			}
			.item-note {
			}
		}
	}
	.vip-bonus {
		.table-title {
			text-align: center;
			padding: 18px 0;
		}
	}
	.bg-purple {
		background: linear-gradient(180deg, #840c88 0%, #471a5c 29.72%, #3d2755 69.06%, #8f2092 100%);
	}
	.bg-green {
		background: linear-gradient(180deg, #42781e 0%, #255741 30.41%, #2b5547 69.75%, #4a9c33 100%);
	}
	.bg-brown {
		background: linear-gradient(180deg, #7b240b 0%, #551a1d 30.41%, #412935 69.75%, #68482f 100%);
	}
	.bg-blue {
		background: linear-gradient(180deg, #11778e 0%, #174e5f 29.72%, #234c5f 69.06%, #2086a2 100%);
	}
	.bg-olive {
		background: linear-gradient(180deg, #917b0a 0%, #5f5e22 29.72%, #4c5241 69.06%, #84852b 100%);
	}
	.bg-dark-blue {
		background: linear-gradient(180deg, #112e8c 0%, #1b1f58 29.72%, #1f2456 69.06%, #2047a5 100%);
	}
	table {
		width: 100%;
		.table-header {
			position: sticky;
			top: 0;
			z-index: 10;
			background: var(--color-bg-1);
			color: var(--color-text-2);
			font-size: 10px;
			border-radius: 4px;
			tr {
				background: var(--color-bg-2);
			}
			th {
				width: 19%;
				position: relative;
				min-height: 30px;
				line-height: 1.2;
				padding: 3px 0;
				vertical-align: middle;
				text-align: end;
				white-space: pre-line;
				&:last-child {
					width: 5%;
				}
			}
			.special-events {
				width: 20%;
			}
		}
		tbody {
			tr {
				padding: 4px 0;
				td {
					text-align: end;
					color: var(--color-text-2);
					font-size: 12px;
					vertical-align: middle;
					&:last-child {
						width: 5%;
					}
				}
				&:nth-child(even) {
					background-color: var(--color-bg-2);
					border-radius: 4px;
				}
			}
		}
		.checked-icon {
			color: var(--color-success);
			font-size: 18px;
		}
	}
	.vip-rebate-note {
		color: var(--color-text-3);
		font-size: 12px;
		padding: 10px 0 8px;
		div,
		p {
			line-height: 16px;
		}
	}
	table.vip-perks-table {
		.table-header {
			th {
				width: 16%;
				&:last-child {
					width: 4%;
				}
			}
		}
		tbody {
			tr {
				td {
					&:last-child {
						width: 4%;
					}
				}
			}
		}
	}
}
</style>
